<template>
    <div>
        <header>
            <h1 style="letter-spacing: 10px;">纺织服装知识图谱平台</h1>
        </header>
    
    
        <!-- 首页容器的构建 -->
        <section class="container">
        <!-- 左部分 -->
            <section class="left">
              <!--   conpage组件带有slot槽口，直接引用可以复用-->
                <listpage>
                    <Item1></Item1>
                </listpage>
                <listpage>
                    <Item2></Item2>
                </listpage>
            </section>
    
    
  
        <!-- 中间部分 -->
            <section class="center">
              <h2>查询边</h2>
              <div class="search">
        <!-- <label style="margin: 0.25rem;">按照边查询</label> -->
        <el-select v-model="link_by_name" placeholder="请选择边">
          <el-option v-for="role in roles" :key="role" :label="role" :value="role"></el-option>
        </el-select>
        <p style="margin: 0.25rem;">您要查询的是: {{link_by_name }}</p>
        <button class="buttom" @click="sendDataToBackend">SEARCH</button>
      </div>
                <div class="chart" id="node_link"></div>
    
            </section>
                      <!-- 右部分 -->
                      <section class="right">
                <conpage>
                    <Item3></Item3>
                </conpage>
                <!-- <conpage>
                    <Item4></Item4>
                </conpage> -->
            </section>
        </section>
    </div>
    </template>
    
    <script>
    import api from "@/api";
    import * as echarts from 'echarts';
    import listpage from "@/components/ListPage.vue"
    import conpage from "@/components/ConPage.vue"
    // import node from "@/components/charts/shownode.vue"
    import Item1 from "@/components/itemOne.vue"
    import Item2 from "@/components/itemTwo.vue"
    import Item3 from "@/components/itemThree.vue"
    // import Item4 from "@/components/itemFour.vue"
    
    // import { shallowRef } from 'vue'
    // import ComeA from '@/components/ComeA.vue'
    // import ComeB from '@/components/ComeB.vue'
    
    // const activeComponent = shallowRef(ComeA)
    // const activeComponent1 = shallowRef(ComeB)
    
    import {inject} from "vue"
    export default {
        data() {
        return {
          graphshow:"",
          link_by_name:"", // 存放选择的角色字符串的变量
          roles:[]
          // roles: ["include", 'made_of', 'role3', 'role4'] // 下拉框的选项数组
        };
      },
        name: 'HomePage',
        components:{
            listpage,
            conpage,
            // node,
            Item1,
            Item2,
            Item3,
            // Item4
        },
    
        setup(){
            let $echarts = inject("echarts")
            let $http = inject("axios")
            console.log($echarts)
            console.log($http)
        },
        mounted(){
          this.get_all_relationship_type();
       // this.fetchLinkByName(this.link_by_name);
        // this.showcharts();
      },
      methods:{
        async get_all_relationship_type(){
          try {
            const node_type = await api.post('/get_all_relationship_type');
            this.roles = node_type;
            console.log('node_type Response:',this.roles);
            // Handle the API response as needed
          } catch (error) {
            console.error('Error:', error);
            // Handle the error
          }
    
        },
      
       async sendDataToBackend(){
        console.log(this.link_by_name);
          try {
            const response = await api.post('/link_by_name?name='+this.link_by_name);
            this.graphshow = response;
            this.showcharts(this.graphshow);
            console.log('API Response:',this.graphshow);
            // Handle the API response as needed
          } catch (error) {
            console.error('Error:', error);
            // Handle the error
          }
        //   async fetchLinkByName(name) {
        //   try {
        //     const response = await api.getLinkByName(name);
        //     this.linkname = response.data; // 假设服务器返回一个名为"name"的字段
        //     console.log(this.linkname);
        //   } catch (error) {
        //     console.error(error);
        //   }
        // }
      },
        showcharts(gra){
          var chartDom = document.getElementById('node_link');
          var myChart = echarts.init(chartDom);
          var option;
          myChart.showLoading();
          // var graph = require("/src/data/node1.json");
          var graph = gra;
          myChart.hideLoading();
    
           graph.nodes.forEach(function (node) {
               node.symbolSize = 80;
            });
      //     graph.links.forEach(function (link) {
      //   link.label = {
      //     show: true,
      //     formatter: function () {
      //       return graph.categories[link.category].name;
      //     },
      //     fontSize: 10,
      //     color: '#888',
      //     fontWeight: 'normal'
      //   };
      // }),
    
          option={
            title: {
          text: this.link_by_name,
          subtext: 'Default layout',
          top: 'bottom',
          left: 'right',
          textStyle:{
            color:'#fff'
          }
        },
        tooltip: {
    
        },
        legend: [
          {
            // selectedMode: 'single',
            textStyle:{
                color:'#fff'
            },
            data: graph.categories.map(function (a) {
              return a.name;
            })
          }
        ],
    
        series: [
          {
            name: this.link_by_name,
            type: 'graph',
            // layout: 'circular',
            layout: 'force',
        
            zoom: 0.005,
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: true,
            textStyle:{
                fontFamily: "Courier New",
                color:'#fff',
                fontWeight: "bolder"
            },
            lineStyle:{
              color: '#fff'
            },
            label: {
              normal : {
              position: 'right',
              textStyle:{
                color: '#fff',
                fontSize:12
              },
              show: true
            }
            },
            force: {
              repulsion: 100
            },
            itemStyle: {
              shadowBlur: 5
            }
          }
        ]
          };
          option && myChart.setOption(option);
      }
      }
    }
    </script>
    
    <style lang="less">
    //header页面头部 标题部分
        header{ 
            height: 80px;
            width: 100%;
            background-color: #1e1e1e;
            //分级标题样式
            h1{
                font-size: 50px;
                color: #fff;
                text-align: center;
                line-height: 80px;
            }
        }
        //容器样式
        .container{
                //容器边界
                min-width: 1228px;
                max-width: 2024px;
                margin:0 auto;
                padding: .125rem .125rem 0;
                height: 1000px;
                // background-color:rgba(11, 11, 11, .20);
                display: flex; //flex自适应布局
                .left{//各部分份数
                    flex:3;
                }
                .right{
                    flex:3;
                }
                .center{
                    flex: 4;
                    height: 16rem;
                    padding:  0.125rem;
                    margin: 0.25rem;
                    // border: 1px solid black;
                    border-radius: 10px;
                    background-color: rgba(11,11,11,0.5)
    
                }
        }
        .buttom{
          border: 1px  ;
            border-radius: 5px;
            width: 90px;
            height: 30px;
          
          background-color: #fff;
    
        }
    
        .chart{
            // top: 1rem;
            // left: 1rem;
        // padding:  0.1rem;
        margin: 0.1rem;
        width: 914px;
        height: 650px;
           
        }
    
        .search{
          font-size: medium;
          text-align: center;
          line-height: 80px;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: bolder;
          font-family:serif;
          letter-spacing: 5px;
        }
        // .fade-enter-active,
        // .fade-leave-active {
        // transition: opacity 0.5s ease;
        // }
    
        // .fade-enter-from,
        // .fade-leave-to {
        // opacity: 0;
        // }
    </style>